<template>
  <v-container fluid class="statistics-wrapper">

    <v-layout row wrap>
      <v-flex md12>
        <v-btn icon @click="$router.push('/version')">
          <v-icon>
            fa-angle-left
          </v-icon>
        </v-btn>
        <span class="title">{{date}}</span>
        <v-btn dark color="blue">新增需求</v-btn>
      </v-flex>
      <v-flex md4>
        <v-layout row class="">
          <v-flex md4 class="timeline">
            <span class="timeline-dot"></span>
            <span class="title">8:00</span>
          </v-flex>
          <v-flex md8>
            <v-chip outline color="red" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="light-blue" label>
              <span class="subheading">长沙麻将-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>

          </v-flex>
        </v-layout>
        <v-layout row>
          <v-flex md4 class="timeline">
            <span class="timeline-dot"></span>
            <span class="title">9:00</span>
          </v-flex>
          <v-flex md8>
            <v-chip outline color="teal" label>
              <span class="subheading">经典斗牛-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="indigo" label>
              <span class="subheading">欢乐金花-s2.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="amber darken-3" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="red" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
          </v-flex>
        </v-layout>
        <v-layout row>
          <v-flex md4 class="timeline">
            <span class="timeline-dot"></span>
            <span class="title">10:00</span>
          </v-flex>
          <v-flex md8>
            <v-chip outline color="teal" label>
              <span class="subheading">经典斗牛-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="indigo" label>
              <span class="subheading">欢乐金花-s2.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="amber darken-3" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="red" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
          </v-flex>
        </v-layout>
        <v-layout row>
          <v-flex md4 class="timeline">
            <span class="timeline-dot"></span>
            <span class="title">11:00</span>
          </v-flex>
          <v-flex md8>
            <v-chip outline color="teal" label>
              <span class="subheading">经典斗牛-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="indigo" label>
              <span class="subheading">欢乐金花-s2.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="amber darken-3" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
            <v-chip outline color="red" label>
              <span class="subheading">跑得快-s1.{{date}}</span>
              <v-icon right>more_vert</v-icon>
            </v-chip>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    date: '',
    modalText: "",
    cardTitle: "日统计",
    toggleCard: 1,
    userCard: "昨日活跃用户构成",
    userCos: {},
    projectName: 1,
    departmentName: 1,
    projectItems: [
      {
        text: "经典斗牛",
        value: 1,
        gameId: "BULLFIGHT",
        url: "classic-bull.png"
      },
      { text: "斗公牛", value: 2, gameId: "OXFIGHT", url: "fight-bull.png" },
      { text: "点子牛", value: 5, gameId: "DIANZINIU", url: "dianzi-bull.png" },

      { text: "跑得快", value: 8, gameId: "RUNFAST", url: "runfast.png" },
      { text: "欢乐金花", value: 4, gameId: "JINHUA", url: "jinhua.png" },
      {
        text: "红中麻将",
        value: 3,
        gameId: "HONGZHONG",
        url: "hz-majiang.png"
      },
      {
        text: "平江扎鸟",
        value: 11,
        gameId: "PJMAHJONG",
        url: "pj-majiang.png"
      },
      {
        text: "长沙麻将",
        value: 10,
        gameId: "CSMAHJONG",
        url: "cs-majiang.png"
      },
      { text: "三公", value: 6, gameId: "SANGONG", url: "sangong.png" }
    ],
    departmentItems:[
      {
        text:'设计部',
        value: 1
      },{
        text:'技术部',
        value: 2
      },{
        text:'市场部',
        value: 3
      },{
        text:'产品部',
        value: 4
      }
    ],
    dayData: {}
  }),
  mounted() {
    this.date = this.$route.query.date;
    this.getDayList()
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  methods: {
     getDayList() {
       console.log(9999)
       let opt = {
         date: this.date
       }
      version.getDayList.r(opt).then(({ data }) => {
        if (data.result == 0) {
          let items = data.data;
          console.log(items)
        }
      });
    },
  }
};
</script>

<style lang="less" scoped>
.timeline{
  border-left: 3px solid #f44336;
  position: relative;
  padding: 12px;
  .timeline-dot{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f44336;
    background: white;
    position: absolute;
    left: -10px;
    top: 0;
    border-radius: 50%;
  }
}
</style>


